<template>
  <view class="container">
    <uv-notify ref="notify" type="error"></uv-notify>
    <view style="background-color: #FFFFFF;">
	    <uv-tabs :list="menuList" @click="menuClick"></uv-tabs>
		</view>
    <view class="content" v-if="activeMenu === '流程办理'">
      <uni-section title="上报信息" type="line" v-show="processFormList.length > 0">
        <uv-cell-group>
          <uv-cell title="上报类别" :value="formData.reportType"></uv-cell>
          <uv-cell title="报警等级" :value="formData.warningLevel"></uv-cell>
          <uv-cell title="上报位置" :value="formData.reportPosition"></uv-cell>
          <uv-cell title="上报时间" :value="formData.reportTime"></uv-cell>
          <uv-cell title="内容描述" :label="formData.contentDesc"></uv-cell>
          <uv-cell title="图片" v-if="reportPhoto.length">
            <template v-slot:label>
              <view class="album-container">
                <uv-album :urls="reportPhoto" :multipleSize="`${screenWidthDividedByThree}rpx`" space="8rpx"></uv-album>
              </view>
            </template>
          </uv-cell>
        </uv-cell-group>  
      </uni-section>
      
      <uni-section title="处理信息" type="line" v-show="processFormList.length > 1"> 
        <uv-cell-group> 
            <uv-cell title="内容描述" :label="formData.fixContentDesc"></uv-cell>
            <uv-cell title="处理时间" :value="formData.resolveTime"></uv-cell>
            <uv-cell title="图片">
                <template v-slot:label>
                <view class="album-container">
                    <uv-album :urls="handlePhoto.map(photo => photo.url)" :multipleSize="`${screenWidthDividedByThree}rpx`" space="8rpx"></uv-album>
                </view>
                </template>
            </uv-cell>
          </uv-cell-group> 
     
    
      </uni-section>
 
    </view>
    <view class="content" v-if="activeMenu === '流程流转'">
      <u-steps  direction="column">
        <u-steps-item v-for="(item, index) in historyProcNodeList" :key="index" :title="item.activityName">
          <!-- <view slot="title"> {{ item.activityName}}</view> -->
          <u-icon slot="icon" :name="setIcon(item.endTime)" size="20"></u-icon>
          <view slot="desc">
            <uni-card v-if="item.activityType === 'startEvent'"  class="event_node">
               <view slot="actions" >
                 {{ item.assigneeName }} 在 {{ item.createTime }} 发起流程
              </view>
                  
            </uni-card>
            <uni-card  v-if="item.activityType === 'userTask'">
              <view slot="title">
                <u-cell-group>
                  <u-cell title="实际办理" :value="item.assigneeName || '-'"></u-cell>
                  <u-cell title="候选办理" :value="item.candidate || '-'"></u-cell>
                  <u-cell title="接收时间" :value="item.createTime || '-'"></u-cell>
                  <u-cell title="办结时间" :value="item.endTime || '-'"></u-cell>
                  <u-cell title="耗时" :value=" item.duration || '-'"></u-cell>
                </u-cell-group>
              </view>
              <view slot="actions" >
                 <view v-if="item.commentList && item.commentList.length > 0">
                      <view v-for="(comment, index) in item.commentList" :key="index" class="comment-list">
                          <uni-tag :inverted="true" :text="commentType(comment.type)" :type="approveTypeTag(comment.type)"  />
                          <uni-tag :inverted="true" :text="comment.time"/>
                          <uni-section  title="审批意见：" type="line">{{ comment.fullMessage }}</uni-section>
                      </view>
                  </view>
              </view>
            </uni-card>
            <uni-card v-if="item.activityType === 'endEvent'" class="event_node">
                <view slot="actions" >
                    {{ item.createTime }} 结束流程
                </view>
                 
            </uni-card>
          </view>
        </u-steps-item>
       
      </u-steps>
        <!-- <uni-steps :options="commentList" active-color="#007AFF" direction="column" /> -->
    </view>
  </view>
</template>

<script>
import store from '@/store';
import { getProcessDetail } from "@/request/index"; 
import { parseTime } from "@/utils/toolUtil.js";
export default {
  data(){
    return {
      activeMenu: "", 
      reportPhoto: [],
      handlePhoto: [],

      screenWidthDividedByThree: 0, 
      range: [
        { value: 0, text: "张三" },
        { value: 1, text: "李四" },
        { value: 2, text: "王武" },
      ],
      operateForm: {
        comment: ""
      },
      statusList: [],
      notifyMessage: "",
      statusImage: require("static/index/进行中.png"),
      menuList: [
					{ name: "流程办理" },
					{ name: "流程流转" },
      ],
      activeMenu: '流程办理',
      historyProcNodeList: [],
      processFormList: [],
    }
  },

  onLoad(options) {
    // this.activeMenu = options.activeMenu;  
    const { procInsId,taskId } = options;
    this.operateForm = { procInsId, taskId }
    this.getScreenWidth(); 
    this.getProcessDetail(procInsId,taskId);
    
  }, 
  onShow() { 
    this.reportPhoto = [];
    this.handlePhoto = [];  
    console.log(this.formData)
    console.log(this.commentList)
    if(this.formData.reportPhoto){
      this.formData.reportPhoto.forEach( item => {
        this.reportPhoto.push( item.url )
      })
    } 
    
    if(this.formData.resolvePhoto){
      this.formData.resolvePhoto.forEach( item => {
        // this.handlePhoto.push( item.url )
        this.handlePhoto.push(item)
      })
    } else {
      this.formData.resolvePhoto = [];
    }
   
   
  },
  methods: { 
    getProcessDetail(procInsId,taskId) {
      getProcessDetail({procInsId,taskId}).then(res => {
       
          this.historyProcNodeList = res.data.historyProcNodeList.reverse();
          this.processFormList = res.data.processFormList;
          console.log(this.historyProcNodeList)
      
      })
    },
    menuClick(item) {
      this.activeMenu = item.name;
    },
    getStatusImage(){
      let _this = this;
      let status = _this.formData.status;
      let image = "";
      switch(status){
        case "0":
          _this.statusImage = require("static/index/进行中.png");
          break; 
        case "1":
          image = require("static/index/已完成.png");
          break; 
        case "2":
          image = require("static/index/已终止.png");
          break;  
      }
      _this.statusImage = image;
    },
    closeModal(){
      this.$refs.rejectModal.close();
    },
   

  
    getScreenWidth() {
      const systemInfo = uni.getSystemInfoSync().screenWidth;
      const screenWidth = this.px2rpx(systemInfo);
      this.screenWidthDividedByThree = (screenWidth -100) / 3; 
    },
    px2rpx(px) {
      const screenWidth = uni.getSystemInfoSync().screenWidth; 
      return (px * 750) / screenWidth;
    },
    setIcon(val) {
      if (val) {
        return "checkmark-circle-fill";
      } else {
        return "clock-fill";
      }
    },
  
  },
  computed: {
    buttonStyle() {
      return {
        width: "5rem",
        height: "2.4rem"
      }
    },
    formData(){
      return store.state.common.formData;
    }, 
    commentList() {
      return store.state.common.commentList;
    },
    commentType() {
      return val => {
        switch (val) {
          case '1': return '通过'
          case '2': return '退回'
          case '3': return '驳回'
          case '4': return '委派'
          case '5': return '转办'
          case '6': return '终止'
          case '7': return '撤回'
        }
      }
    },
    approveTypeTag() {
      return val => {
        switch (val) {
          case '1': return 'success'
          case '2': return 'warning'
          case '3': return 'error'
          case '4': return 'primary'
          case '5': return 'success'
          case '6': return 'error'
          case '7': return 'default'
        }
      }
    }
  },
}
</script>

<style lang="scss"> 
.event_node {
   /deep/.uni-card__content {
    padding: 0 !important;
  }
  /deep/ .uni-card__actions {
    padding: 0.8rem !important;
    font-size: 15px;
  }
}
/deep/ .uicon-checkmark-circle-fill {
  color: rgb(43, 196, 24) !important;
}
.uicon-clock-fill {

}
.comment-list {
  padding: 0.4rem 0;
  .uni-tag {
    margin: 0.8rem 0.8rem 0.8rem 0;
    font-size: 0.8rem;
  }
}
/deep/ .uv-tabs__wrapper__nav__item {
  width: 50% !important;
  padding: 0;
}
.resolveReport {
    	background-color: #fff;
	padding: 0.8rem;
	.sm_icon,.yysr_icon{
		width: 1.6rem;
		height: 1.6rem;
	}
	.desc_item{
		position: relative;
	}
	.yysr_icon{
		position: absolute;
		right: 0;
		bottom: 1rem;
	}

	// .uv-action-sheet /deep/ [name="content"]{
	// 	bottom: 63px !important;
	// }
}
.back-popup{
  margin: 0.4rem 1rem 1rem;
}
.album-container{
  padding-top: 0.6rem;
}
.page_header{
  background-color: #fff;
  padding: 0 1rem;
  margin-bottom: 0.8rem;
  position: relative;
  .info-container{
    color: #767a82;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    padding-bottom: 1rem;
    image{
      width: 1.4rem;
      height: 1.4rem;
      margin-right: 0.4rem;
    }
  }
  
  .status-image{
    position: absolute;
    width: 4.4rem;
    height: 4.4rem;
    top: 50%;
    right: 2rem;
    transform: translateY(-50%); 
  }
}
.data-select{
  margin: 0 1rem;
  width: calc(100vw - 2rem);
}
.operate_btn{
  margin: 1rem; 
  display: flex;
  justify-content: space-around;
  align-items: center;
  /deep/ .uv-button{ 
    padding: 0 2rem;
  }
}

.textarea_input{
  margin: 0 1rem;
  width: calc(100vw - 2rem);
  box-sizing: border-box;
}

.content{
  padding-bottom: 2rem;
  background-color: #fff;
}
.operate-btn{
  display: flex;
  justify-content: space-around;
  align-items: center;
  background-color: #fff;
  margin: 1rem;
  padding-bottom: 2rem;
}
</style>